<template>
  <div class="down_mian" id="car_mian">
    <div class="down_row">
      <div class="down_wrap">
        <div>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item :to="{ path: '/exhibition' }"
              >标展</el-breadcrumb-item
            >
            <el-breadcrumb-item>租赁服务</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="query_row">
          <div class="query_head_text">请核实展位信息，再进行下单</div>
          <!--          <div class="add_mian">-->
          <!--            <div @click="dialogVisible = true" :class="'add_wrap'">-->
          <!--              <div>-->
          <!--                {{ standName != "添加展位" ? "更改展位" : "添加展位" }}-->
          <!--              </div>-->
          <!--            </div>-->

          <!--          </div>-->
          <el-button style="margin-top:20px;" type="success" @click="dialogselete = true">展位修改</el-button>
          <div class="stand_info" v-if="stan.exNumber">
            <el-descriptions :column="3" border direction="vertical" >
              <el-descriptions-item label="展馆号">{{
                stan.exNumber
              }}</el-descriptions-item>
              <el-descriptions-item label="展位号">{{
                stan.standNum
              }}</el-descriptions-item>
              <el-descriptions-item label="展位名称" :span="2">{{
                stan.standName
              }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
        <div class="query_wrap">
          <div class="query_but">
            <div>类型:</div>
            <div style="margin-left: 30px">
              <el-radio-group
                v-model="queryparasm.categoryId"
                @change="getlist"
              >
                <!-- radiolist -->
                <el-radio-button
                  v-for="item in radiolist"
                  :key="item.typeId"
                  border
                  :label="item.typeId"
                  >{{ item.typeName }}</el-radio-button
                >
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="lease_list">
          <div
            v-for="(item, index) in leaselist"
            :key="item.id"
            class="list_for"
          >
            <div class="lease_list_img" v-if="item.isLease == 1">
              <!-- <img :src="item.imgUrl" alt="" /> -->
              <el-image
                style="width: 200px; height: 200px"
                :src="item.imgUrl"
                fit="contain"
              ></el-image>
            </div>
            <div class="lease_list_titel">
              {{ item.goodsName }}
            </div>
            <div>
              <div class="lease_item_tab">
                <div>单价 :</div>
                <div class="item_tan_right">
                  <span class="price">￥{{ item.CommonPrice }}</span>
                </div>
              </div>
              <div class="lease_item_tab">
                <div>押金 :</div>
                <div class="item_tan_right">
                  <span class="price">￥{{ item.commonGuarantee }}</span>
                </div>
              </div>
              <div class="lease_item_tab">
                <div>规格 :</div>
                <div class="item_tan_right">
                  <el-select
                    style="width: 150px"
                    size="mini"
                    v-model="item.ranked"
                    placeholder="请选择"
                    @change="changsel(index)"
                  >
                    <el-option
                      v-for="item1 in item.goodsSizeList"
                      :key="item1.ranked"
                      :label="item1.sizeName"
                      :value="item1.ranked"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="lease_item_tab">
                <div>单位({{ item.units }}) :</div>
                <div class="item_tan_right">
                  <!-- {{ item.typeName==null?0:item.typeName }} -->
                  <el-input-number
                    size="mini"
                    v-model="item.typeName"
                    :min="1"
                  ></el-input-number>
                </div>
              </div>
              <div class="lease_item_tab">
                <div>描述 :</div>
                <div class="item_tan_right">{{ item.goodsIntro }}</div>
              </div>
              <div class="lease_item_tab">
                <div @click="addshop(item)" class="Shopping">
                  <div>
                    <i class="el-icon-shopping-cart-full"></i>
                    加入购物车
                  </div>
                </div>
              </div>
            </div>
          </div>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryparasm.pageNum"
            :limit.sync="queryparasm.pageSize"
            @pagination="getlist"
          />
        </div>
      </div>
      <!-- 购物车 -->
      <div class="shop_mian">
        <div class="add_cart_style">
          <div class="shop_header">
            <div class="shop_header_icon">
              <div style="margin-right: 4px">
                <i class="el-icon-shopping-cart-2"></i>
              </div>
              <div>租赁清单</div>
            </div>
            <div class="shop_header_icon">
              <div class="shop_header_nub">
                {{ carlist ? carlist.length : 0 }}
              </div>
              <div>件商品</div>
            </div>
            <div @click="shopdilog = !shopdilog" class="shop_avite">
              {{ shopdilog ? "展开" : "收起" }}
            </div>
          </div>
          <div v-if="!shopdilog" class="shop_cente">
            <div
              class="shop_for"
              v-for="(item, index) in carlist"
              :key="item.id"
            >
              <div class="shop_for_item_left">
                <div class="left_item">
                  <div class="left_item_titel">{{ item.goodsName }}</div>
                  <div class="shop_header_nub">￥{{ item.commonPrice }}</div>
                </div>
              </div>
              <div>
                <div>规格: {{ item.sizeName }}</div>
              </div>
              <div class="shop_for_item_right">
                <div style="margin-right: 10px">×{{ item.goodsCount }}</div>
                <div @click="deleshop(item)" class="right_but">删除</div>
              </div>
            </div>
          </div>
          <div class="shop_bottom">
            <div class="shop_bottom_row">
              <div>总计:</div>
              <div style="color: #ff0000; margin-left: 10px">￥{{ Price }}</div>
            </div>
            <div>
              <el-button @click="hanldgo" size="mini" type="danger"
                >去结算</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹窗区域 -->
    <!--    <el-dialog-->
    <!--      title="添加展位"-->
    <!--      :visible.sync="dialogVisible"-->
    <!--      width="30%"-->
    <!--      :before-close="handleClose"-->
    <!--    >-->
    <!--      <el-form-->
    <!--        label-position="left"-->
    <!--        ref="form"-->
    <!--        :model="form"-->
    <!--        :rules="rules"-->
    <!--        label-width="80px"-->
    <!--      >-->
    <!--        <el-form-item label="展位馆号:" prop="exNumber">-->
    <!--          <el-select-->
    <!--            v-model="form.exNumber"-->
    <!--            filterable-->
    <!--            clearable-->
    <!--            @change="changeExNumber"-->
    <!--          >-->
    <!--            <el-option-->
    <!--              v-for="item in exNumber"-->
    <!--              :key="item"-->
    <!--              :label="item"-->
    <!--              :value="item"-->
    <!--            >-->
    <!--            </el-option>-->
    <!--          </el-select>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="展位号 :" prop="id">-->
    <!--          <el-autocomplete-->
    <!--            v-model="form.id"-->
    <!--            :fetch-suggestions="querySearchAsync"-->
    <!--            placeholder="请输入内容"-->
    <!--            @select="handleSelect"-->
    <!--            value-key="standNum"-->
    <!--          ></el-autocomplete>-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--      <el-descriptions-->
    <!--        title="确认展位信息"-->
    <!--        direction="vertical"-->
    <!--        :column="4"-->
    <!--        border-->
    <!--      >-->
    <!--        <el-descriptions-item label="展馆号">{{-->
    <!--          stan.exNumber-->
    <!--        }}</el-descriptions-item>-->
    <!--        <el-descriptions-item label="展位号">{{-->
    <!--          stan.standNum-->
    <!--        }}</el-descriptions-item>-->
    <!--        <el-descriptions-item label="展位类型"-->
    <!--          ><el-tag size="small" v-if="stan.standType != null">{{-->
    <!--            stan.standType == "1" ? "特装" : "标展"-->
    <!--          }}</el-tag></el-descriptions-item-->
    <!--        >-->
    <!--        <el-descriptions-item label="展位名称">{{-->
    <!--          stan.standName-->
    <!--        }}</el-descriptions-item>-->
    <!--        <el-descriptions-item label="展位面积" :span="2">{{-->
    <!--          stan.standArea-->
    <!--        }}</el-descriptions-item>-->
    <!--      </el-descriptions>-->
    <!--      <span slot="footer" class="dialog-footer">-->
    <!--        <el-button @click="dialogVisible = false">返 回</el-button>-->
    <!--        <el-button type="primary" @click="hanldadd">确 定</el-button>-->
    <!--      </span>-->
    <!--    </el-dialog>-->

    <!-- 选择参展商和 -->
    <el-dialog
            :show-close="true"
      title="提示"
      :visible.sync="dialogselete"
      width="30%"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <el-form
        :rules="rules"
        ref="seleteForm"
        :model="formInline"
        class="demo-form-inline"
        label-width="100px"
        label-position="left"
      >
        <el-form-item label="选择类型 :" prop="resource">
          <el-radio-group v-model="formInline.resource" @change="as">
            <el-radio :label="1">搭建商</el-radio>
            <el-radio :label="2">参展商</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-form
        label-position="left"
        ref="form"
        :model="form"
        label-width="80px"
      >
        <el-form-item label="展位馆号:" prop="exNumber">
          <el-select
          style="width:250px"
            v-model="form.exNumber"
            filterable
            clearable
            @change="changeExNumber"
          >
            <el-option
              v-for="item in exNumber"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="展位号 :" prop="id">
          <el-autocomplete
            style="width:250px"
            @select="handleSelect"
            v-model="form.id"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入内容"
            value-key="standNum"
          ></el-autocomplete>
        </el-form-item>
      </el-form>
      <el-descriptions
        title="确认展位信息"
        direction="vertical"
        :column="4"
        border
      >
        <el-descriptions-item label="展馆号">{{
          stan.exNumber
        }}</el-descriptions-item>
        <el-descriptions-item label="展位号">{{
          stan.standNum
        }}</el-descriptions-item>
        <el-descriptions-item label="展位类型"
          ><el-tag size="small" v-if="stan.standType != null">{{
            stan.standType == "1" ? "特装" : "标展"
          }}</el-tag></el-descriptions-item
        >
        <el-descriptions-item label="展位名称">{{
          stan.standName
        }}</el-descriptions-item>
        <el-descriptions-item label="展位面积" :span="2">{{
          stan.standArea
        }}</el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { setToken, getToken } from "@/utils/auth";
import {
  getlist,
  stand_infoid,
  getshopcar,
  addahopcar,
  delshopcar,
  getCategory,
} from "@/api/lease/index";
import { stand_infolist, getStandInfo, verifyHasDoBg } from "@/api/outfit/drawingadd.js";
export default {
  dicts: ["category_type"],
  data() {
    return {
      rules: {
        resource: [{ required: true, message: "请选择类型", trigger: "change" }],
      },
      queryparasm: {
        pageNum: 1,
        pageSize: 10,
        exhibitionId: null,
        categoryId: " ",
      },
      standName: "添加展位",
      Price: 0,
      carshow: false,
      shopdilog: false,
      gjz: "",
      form: {
        id: null,
      },
      dialogVisible: false,
      leaselist: [], // 商品数组
      carlist: [], // 购物车数组
      radiolist: [], // 类型数组,
      formdata: {
        exNumber: null,
        exhibitionId: null,
      },
      exNumber: null,
      stan: {},
      isLease: 0,
      total: 0,
      pathTo: false,
      dialogselete: true, // 参展商弹出框,
      formInline: {
        resource:''
      }, // 参展商弹出框的表单数据
    };
  },
  beforeRouteLeave(to, form, next) {
    this.dialogselete = false;
    next();
  },
  activated() {
    this.exhibition = JSON.parse(getToken("exhibition"));
    this.standId = this.$route.query.standId;
    this.pathTo = this.$route.query.to;
    console.log(this.pathTo);
    if (this.standId) {
      getStandInfo(this.standId).then((res) => {
        this.stan = res.data;
      });
    }

    if (this.exhibition) {
      this.queryparasm.exhibitionId = this.exhibition.id;
      if (this.exhibition.exNumber != null) {
        this.exNumber = this.exhibition.exNumber.split(";");
      }
      if (this.standId) {
        this.getlist();
        this.getshopcar();
      }
    }
    this.getlist();
    this.getcate();
    this.getinputdata();
    window.addEventListener("scroll", this.windowScroll, true);
  },
  deactivated() {
    window.removeEventListener("scroll", this.windowScroll, true);
  },
  methods: {
    // 获取远程搜索数据
    getinputdata() {
      console.log(this.formdata);
      this.formdata.exhibitionId = this.exhibition.id;
      stand_infolist(this.formdata).then((res) => {
        if (res.code == 200) {
          this.restaurants = res.rows;
        }
      });
    },
    changeExNumber() {
      this.formdata.exNumber = this.form.exNumber;
      this.form.id = null;
      this.getinputdata();
    },
    // 数据进行匹配
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;
      // if (results.length < 1) {
      //   return this.$message.error("用户暂未分配展位");
      // }
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
      // cb(results);
    },
    createStateFilter(queryString) {
      return (state) => {
        return state.standNum.indexOf(queryString) >= 0;
      };
    },
    // 获取类型
    getcate() {
      getCategory().then((res) => {
        this.radiolist = res.data;
        this.radiolist.unshift({
          typeId: " ",
          typeName: "全部",
        });
      });
    },
    // 获取列表
    getlist() {
      if (this.stan != null) {
        getlist(this.queryparasm).then((res) => {
          this.leaselist = res.data;
          this.leaselist.forEach((item, index) => {
            item.typeName = 1;
            item.sizename = item.goodsSizeList[0].id;
            item.CommonPrice = item.goodsSizeList[0].commonPrice;
            item.commonGuarantee = item.goodsSizeList[0].commonGuarantee;
          });
        });
      }
    },
    windowScroll() {
      this.$nextTick(() => {
        // 进入nexTick
        const body = document.getElementById("app"); // 获取滚动条的dom
        const mian = document.getElementById("car_mian");
        // 获取距离顶部的距离
        // const scrollTop = body.scrollTop;
        const scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop ||
          body.scrollTop;
        // 获取可视区的高度
        const windowHeight = body.clientHeight;
        // 获取滚动条的总高度
        const scrollHeight = mian.scrollHeight;
        if (scrollTop + windowHeight >= scrollHeight) {
          // 把距离顶部的距离加上可视区域的高度 等于或者大于滚动条的总高度就是到达底部
          this.carshow = false;
        } else {
          this.carshow = true;
        }
      });
    },
    // 选择参展商的弹出框关闭回调
    handleClose() {
      this.dialogselete = false;
      // this.$router.go(-1);
    },
    // 选择参展商的弹出框提交
    confirm() {
      this.$refs.seleteForm.validate((valid) => {
        if (valid) {
          if(!this.stan.id){
            return this.$message.error('请选择展位')
          }else{
            this.getshopcar();
            this.handleClose();
          }
          
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 购物车新增商品
    addshop(row) {
      if (this.stan.id) {

        let user = JSON.parse(getToken("user"));
        let sizeid = row.goodsSizeList.filter(
          (item) => item.ranked == row.ranked
        );
        let framdata = {
          userId: user.userId,
          goodsCount: row.typeName,
          standId: this.stan.id,
          sizeId: sizeid[0].sizeId,
          goodsId: row.goodsId,
        };
        addahopcar(framdata).then((res) => {
          this.getshopcar();
        });
      } else {

        this.dialogselete = true;
      }
    },
    // 购物车查询
    getshopcar() {
      this.Price = 0;
      let user = JSON.parse(getToken("user"));
      let exhibition = JSON.parse(getToken("exhibition"));
      getshopcar(user.userId, exhibition.id, this.stan.id).then((res) => {
        this.carlist = res.rows;
        this.carlist.forEach((item, index) => {
          this.Price += item.commonPrice * item.goodsCount;
        });
      });
    },
    hanldselect() {
      this.$router.go(0);
    },
    // 删除购物车商品
    deleshop(row) {
      delshopcar(row.cartItemId).then((res) => {
        if (res.code == 200) {
          this.$message.success("删除商品成功");
          this.getshopcar();
        }
      });
    },
    hanldgo() {
      console.log(this.formInline.resource)
      if (this.carlist.length < 1) {
        return this.$message.error("请先选择商品");
      } else {
        if (this.stan) {
          setToken("stan", JSON.stringify(this.stan));
          this.$router.push({ path: "/liquidation", query: { isLease: 1, exhibitorType: this.formInline.resource } });
        } else {
          this.dialogselete = true;
        }
      }
    },
    // hanldadd() {
    //   setToken("stan", JSON.stringify(this.stan));
    //   this.standName = this.stan.standNum;
    //   this.getlist();
    //   this.getshopcar();
    //   this.dialogVisible = false;
    // },
    handleSelect(val) {
      this.stan = null;
      verifyHasDoBg(val.id).then((res) => {
        if (res.code == 200) {
          getStandInfo(val.id).then((res) => {
            if (res.code == 200) {
              this.stan = res.data;
            }
          });
        }
        if (res.code == 333) {
          return this.$message.error(res.message);
        }
      })
    },
    // 规格的下拉款事件
    changsel(val) {
      this.leaselist[val].goodsSizeList.forEach((item, index) => {
        if (item.ranked == this.leaselist[val].ranked) {
          this.leaselist[val].CommonPrice = item.commonPrice;
          this.leaselist[val].commonGuarantee = item.commonGuarantee;
        }
      });
    },
    as(val){

      console.log(this.formInline);
      this.formInline.resource = val
      console.log(val);
    }
  },
};
</script>
<style scoped>
.down_mian {
  background-color: #f2f2f2;
  padding: 20px;
  min-height: 430px;
  position: relative;
}
.down_wrap {
  width: 1100px;
  position: relative;
  background-color: #fff;
  padding: 20px 20px 10px 20px;
  border-bottom: 1px solid #f2f2f2;
}
.query_head_text {
  color: #9e9e9e;
}
.add_mian {
  display: flex;
  margin-top: 20px;
}
.stand_info {
  margin: 10px 0;
}
.add_wrap {
  width: 100px;
  height: 100px;
  color: #666;
  font-size: 14px;
  border: 1px dashed #9e9e9e;
  display: flex;
  justify-content: center;
  align-items: center;
}
.add_wrap:hover {
  opacity: 0.8;
  border: 1px dashed #ff0000;
  color: #ff0000;
  cursor: pointer;
}
.query_but {
  display: flex;
  align-items: center;
  margin: 20px 0;
}
/deep/.el-radio-button {
  margin-right: 20px !important;
  /* border: 1px solid #9e9e9e; */
}
/deep/.el-radio-button__inner {
  border-radius: 0 !important;
  border-left: 1px solid #dcdfe6;
}
.query_wrap {
  border-bottom: 1px solid #dadada;
  padding: 20px 0;
}
.lease_list {
  display: flex;
  flex-wrap: wrap;
}
.list_for {
  padding: 20px;
  width: 21%;
}
.list_for:hover {
  cursor: pointer;
  border: 1px solid #e0e2e6;
  box-shadow: 0 0 9px 3px rgb(190, 189, 189);
}
/* .lease_list_img {
  height: 250px;
  display: flex;
  justify-content: center;
}
.lease_list_img img {
  width: 200px;
  object-fit: contain;
} */
.price {
  color: #ff0000;
}
.lease_item_tab {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.item_tan_right {
  margin-left: 20px;
}
.lease_list_titel {
  font-size: 20px;
  font-weight: bold;
}
.Shopping {
  width: 130px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ff0000;
  color: #ff0000;
  font-size: 14px;
}
.shop_header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #bebebe;
}
.shop_header_icon {
  display: flex;
}
.shop_for {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #bebebe;
}
.shop_header_nub {
  color: #ff0000;
  margin-right: 5px;
}
.shop_avite:hover {
  cursor: pointer;
}
.shop_for_item_left {
  display: flex;
}
.shop_for_item_right {
  display: flex;
  justify-content: flex-end;
}
.right_but:hover {
  cursor: pointer;
}
.shop_for_item {
  line-height: 30px;
}
.right_but {
  color: #ff0000;
}
.shop_bottom {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shop_cente {
  max-height: 200px;
  overflow: auto;
}
.left_item_titel {
  font-size: 16px;
}
.shop_bottom_row {
  display: flex;
  align-items: center;
}
.down_row {
  display: flex;
  justify-content: center;
}
.add_cart_style {
    position: fixed;
  top: 50%;
  width: 350px;
  /* max-height: 200px; */
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 10px;
}
.shop_mian {
   width: 400px;
  margin-left: 20px;
}
.actve_wrap {
  width: 180px;
  height: 50px;
  background-color: #409eff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
</style>